<template>
  <div class="container">
    <!-- 鼠标移入的目标元素 -->
    <div
      class="hover-target"
      @mouseenter="showPopup = true"
      @mouseleave="showPopup = false"
    >
      鼠标移入这里
    </div>

    <!-- 气泡框 -->
    <div
      v-if="showPopup"
      class="popup"
    >
      <img
        class="popup-image"
        :src="imageUrl"
        alt="图片预览"
      />
    </div>
  </div>
</template>

<script>
  export default {
    name: 'Appreciate',
    data() {
      return {
        showPopup: false, // 控制气泡框是否显示
        imageUrl: "https://via.placeholder.com/150", // 图片地址：可以替换为实际的图片链接
      };
    },
  };
</script>

<style scoped>
  /* 主容器 */
  .container {
    position: relative; /* 包裹元素用于定位 */
    display: inline-block;
    text-align: center;
    margin: 50px; /* 外边距用于示例演示 */
  }

  /* 鼠标移入的目标样式 */
  .hover-target {
    display: inline-block;
    padding: 10px 20px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
  }

  .hover-target:hover {
    background-color: #e6e6e6;
  }

  /* 气泡框样式 */
  .popup {
    position: absolute;
    top: 110%; /* 气泡框在触发元素下方 */
    left: 50%; /* 水平居中 */
    transform: translateX(-50%); /* 修正居中偏移 */
    margin-top: 8px; /* 与目标元素的间距 */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 5px;
    z-index: 1000; /* 保证气泡框出现在前面 */
    transition: all 0.3s ease; /* 气泡动态效果 */
  }

  /* 图片样式 */
  .popup-image {
    display: block;
    max-width: 200px; /* 限制图片宽度 */
    max-height: 200px; /* 限制图片高度 */
    object-fit: contain; /* 图片自适应缩放 */
    border-radius: 4px;
  }
</style>
